<template>
    <div>
        <div class="search">
            <van-search placeholder="请输入搜索关键词" v-model="keywords" @search="search" />
        </div>
        <div class="content">
            <div class="fl">
                <van-sidebar v-model="activeKey" @change="typePros">
                    <van-sidebar-item v-for="type in types" :key="type.id" :title="type.name" />

                </van-sidebar>
            </div>
            <div class="fr">
                <div class="pros" v-for="pro in pros" :key="pro.id">
                    <p class="proname">{{ pro.name }}</p>
                    <img :src="pro.banner" alt="">
                    <p class="spec">规格：{{ pro.specs }}</p>
                    <p class="price">价格：￥<span>{{ pro.price }}</span>元</p>
                    <p class="btns">
                        <van-button round type="info" color="rgb(255, 81, 22)"
                            @click="$event => godetail(pro.id)">查看详情</van-button>
                        <van-button round type="info" color="rgb(255, 81, 22)" @click="addCart(pro)">加入购物车</van-button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import { Sidebar, SidebarItem } from 'vant';
import { getTypes, getPros, searchPros, getTypePros, getTypesAndPros, addcarts } from '@/request/request';
import { getCookie } from '@/utils/cookie';
import { Toast } from 'vant';

Vue.use(Toast);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Search);
export default {
    async created() {
        this.types = await getTypes()
        this.types.unshift({
            id: +new Date(),
            name: '全部'
        })

        // this.getAllPros()
        // getPros().then(data => this.pros = data)
        this.pros = await getPros()

        //如果地址栏有keywords数据，接收
        let keywords = this.$route.query.keywords
        if (keywords) {
            this.keywords = keywords
            this.search()
        }

        //接收地址栏中的typeid
        let typeid = this.$route.query.typeid
        if (typeid) {
            this.pros = await getTypePros(typeid)
        }
    },
    data() {
        return {
            activeKey: 0,
            types: [],
            pros: [],
            keywords: ''
        }
    },
    methods: {
        // getAllPros() {
        //     getPros().then(data => this.pros = data)
        // },
        godetail(proid) {
            getTypesAndPros().then(data => {
                let typeid = ''
                data.forEach(item => {
                    let pro = item.products.find(v => v.id === proid)
                    if (pro) {
                        typeid = item.id
                    }
                    this.$router.push({
                        path: '/prodetail', query: {
                            typeid,
                            proid
                        }
                    })
                })

            })
        },
        async search() {
            this.pros = await searchPros(this.keywords)
        },
        typePros(index) {
            if (index === 0) {
                getPros().then(data => this.pros = data)
                return
            }
            let typeid = this.types[index].id
            getTypePros(typeid).then(data => {
                this.pros = data
            })
        },
        addCart(pro) {
            //判断登录
            let username = getCookie('username')
            if (!username) {
                Toast.fail({
                    message: '请先登录',
                    onClose: () => {
                        this.$router.push({
                            path: '/login',
                            query: {
                                url: this.$route.path
                            }
                        })
                    }
                })
                return
            }
            //已登录
            let clonePro = JSON.parse(JSON.stringify(pro))
            delete clonePro.id
            addcarts({
                ...clonePro,
                proid: pro.id,
                username,
                number: 1
            }).then(data => {
                Toast.success({
                    message: '加入购物车成功'
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.fl {
    float: left;
    position: fixed;
    top: 50px;
    left: 0;
}

.fr {
    float: right;
    margin-right: 20px;
}

.search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
}

.content {
    .pros {
        width: 240px;
        border: 1px solid #ccc;
        margin: 5px;
        border-radius: 5px;
        padding: 10px;

        p {
            text-align: center;
        }

        img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        p.proname {
            font-weight: bold;
            font-size: 16px;
        }

        p.spec {
            color: #999;
        }

        p.price {
            color: #f00;

            span {
                font-weight: bold;
                font-size: 20px;
            }
        }

        p.btns {
            display: flex;
            justify-content: space-around;

            .van-button {
                width: 200px;
            }
        }
    }
}
</style>
